<template>
  <div>
    <div class="nav">
      <!-- <el-button type="primary"
                 plain
                 @click="handleDelBatch()">批量删除</el-button> -->
      <el-button type="primary"
                 plain
                 @click="handleAdd()">添加课程</el-button>
    </div>
    <div>
      <el-table ref="multipleTable"
                :data="list"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection"
                         width="55"> </el-table-column>
        <el-table-column prop="courseId"
                         label="课程id"
                         width="100"> </el-table-column>
        <el-table-column prop="courseTag"
                         label="类型"> </el-table-column>
        <el-table-column prop="courseImg"
                         label="课程封面"
                         width="120">

          <template #default="scope">
            <img :src="scope.row.courseImg"
                 class="table-img">
          </template>
        </el-table-column>
        <el-table-column prop="courseName"
                         label="课程名称"
                         width="120"> </el-table-column>
        <el-table-column prop="teacherId"
                         label="任课教师id"
                         width="120"> </el-table-column>
        <el-table-column prop="lessonNum"
                         label="课时"
                         width="80"> </el-table-column>
        <el-table-column prop="participantCount"
                         label="课程参与人数"
                         width="120"> </el-table-column>
        <el-table-column prop=""
                         label="开课时间"
                         width="120"> </el-table-column>
        <el-table-column prop="courseIntroduction"
                         label="课程介绍"
                         width="300"> </el-table-column>
        <el-table-column prop="courseIntroVideo"
                         label="课程介绍视频"
                         width="120">
          <template #default="scope">
            <a v-if="scope.row.courseIntroVideo"
               :href="scope.row.courseIntroVideo">点击跳转查看</a>
          </template>
        </el-table-column>
        <el-table-column prop="courseGrade"
                         label="课程评分"
                         width="80"> </el-table-column>
        <el-table-column prop=courseCharge
                         :formatter="isChargeFormat"
                         label="是否收费"
                         width="80">
        </el-table-column>
        <el-table-column label="操作"
                         width="300">
          <template #default="scope">
            <el-button size="mini"
                       type="primary"
                       @click="handleNewCode(scope.$index, scope.row)">生成激活码</el-button>
            <el-button size="mini"
                       @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini"
                       type="danger"
                       @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div>
      <van-popup v-model:show="showAdd"
                 style="padding:30px;borderRadius:20px;;minWidth:300px;">
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field v-model="formData.courseName"
                       name="courseName"
                       label="课程名称"
                       placeholder="填写课程名称"
                       :rules="[{ required: true, message: '请填写' }]" />
            <van-field v-model="formData.teacherId"
                       name="teacherId"
                       label="教师id"
                       placeholder="填写教师id"
                       :rules="[{ required: true, message: '请填写' }]" />
            <van-field v-model="formData.courseCharge"
                       name="courseCharge"
                       label="是否收费"
                       placeholder="收费填1，免费填0"
                       :rules="[{ required: true, message: '请填写' }]" />
            <van-field v-model="formData.courseTag"
                       name="courseTag"
                       label="课程标签"
                       placeholder="请填写课程标签"
                       :rules="[{ required: true, message: '请填写' }]" />
            <van-field v-model="formData.courseGrade"
                       name="courseGrade"
                       label="年级"
                       placeholder="请填写年级"
                       :rules="[{ required: true, message: '请填写' }]" />
            <van-field v-model="formData.courseIntroduction"
                       name="courseIntroduction"
                       label="课程介绍"
                       placeholder="请填写课程简介信息"
                       :rules="[{ required: true, message: '请填写' }]" />
            <van-field v-model="formData.lessonNum"
                       name="lessonNum"
                       label="课时"
                       placeholder="请填写课时"
                       :rules="[{ required: true, message: '请填写' }]" />
            <van-field v-model="formData.participantCount"
                       name="participantCount"
                       label="课程容量"
                       placeholder="请填写要参与课程的学生人数"
                       :rules="[{ required: true, message: '请填写' }]" />
            <van-field v-model="formData.courseImg"
                       name="courseImg"
                       label="课程封面URL"
                       placeholder="上传图片功能正在开发(可不填)" />
            <van-field v-model="formData.courseIntroVideo"
                       name="courseIntroVideo"
                       label="课程介绍视频URL"
                       placeholder="上传图片功能正在开发(可不填)" />
          </van-cell-group>
          <div style="margin: 16px;">
            <van-button round
                        block
                        type="primary"
                        native-type="submit">
              确认添加
            </van-button>
          </div>
        </van-form>
      </van-popup>
    </div>

  </div>
</template>
<script>

import { ref, reactive, getCurrentInstance } from 'vue'
import { Toast } from 'vant'
export default {
  setup () {
    const { proxy } = getCurrentInstance()
    const data = reactive({

    })

    const showAdd = ref(false)
    const showAddPopup = () => {
      showAdd.value = true
    }
    function getList () {
      proxy.$axios.course.getAllCourse({ pageNo: 1, pageSize: 1000 }).then(res => {
        if (res.status === 200) {
          proxy.list = res.data.data.records
        }
      })
    }
    function handleAdd () {
      showAddPopup()
    }
    function isChargeFormat (row, column) { // 男0女1
      return JSON.parse(JSON.stringify(row)).courseCharge === 0 ? '免费' : '付费'
    }
    return {
      data,
      getList,
      handleAdd,
      showAdd,
      showAddPopup,
      isChargeFormat
    }
  },
  created () {
    this.getList()
  },
  data () {
    return {
      list: [],
      imgurl: '',
      formData: {
        courseCharge: '',
        courseGrade: '',
        courseImg: 'http://qz0561b4o.hn-bkt.clouddn.com/%E5%A4%AA%E7%A9%BA%E7%A7%91%E5%AD%A61.jpg',
        courseIntroVideo: 'https://stem-src.oss-cn-shenzhen.aliyuncs.com/feelAir/kexue1.mp4',
        courseIntroduction: '',
        courseName: '',
        courseTag: '',
        lessonNum: 0,
        participantCount: '',
        teacherId: ''
      }
    }
  },
  methods: {
    onSubmit (values) {
      this.$axios.course.postCourse(this.formData).then(res => {
        if (res.status === 200) {
          Toast('添加成功')
          this.getList()
          this.showAdd = false
        } else {
          Toast('出错了')
        }
      })
    },
    handleNewCode (index, row) {
      Toast('课程模块的功能正在开发中...')
      // this.$axios.course.getNewRedeem({ courseId: row.courseId, expireTime: '2022-12-12-12:12:14' }).then(res => {
      //   console.log(res)
      //   if (res.status === 200) {
      //     Toast('成功生成激活码')
      //     this.getList()
      //   } else {
      //     Toast('出错了')
      //   }
      // })
    },
    handleEdit (index, row) { // 右侧编辑
      Toast('课程模块的功能正在开发中...')
    },
    handleDelete (index, row) { // 右侧删除
      Toast('课程模块的功能正在开发中...')
    },
    handleDelBatch () {
      Toast('课程模块的功能正在开发中...')
    }
  }
}
</script>
<style lang="scss" scoped>
.nav {
  margin-top: $margin-mini;
  margin-left: $margin-mini;
}
</style>
